<!--<!doctype html>-->
<!--<html>-->

<!--<head>-->
<!--  <meta charset="utf-8">-->
<!--  <title>CSS3实现水波浪浮动特效- 素材abc</title>-->

<!--  <style>-->
<!--    @keyframes move_wave {-->
<!--      0% {-->
<!--        transform: translateX(0) translateZ(0) scaleY(1)-->
<!--      }-->

<!--      50% {-->
<!--        transform: translateX(-25%) translateZ(0) scaleY(0.55)-->
<!--      }-->

<!--      100% {-->
<!--        transform: translateX(-50%) translateZ(0) scaleY(1)-->
<!--      }-->
<!--    }-->

<!--    .waveWrapper {-->
<!--      overflow: hidden;-->
<!--      position: absolute;-->
<!--      left: 0;-->
<!--      right: 0;-->
<!--      bottom: 0;-->
<!--      top: 0;-->
<!--      width: 500px;-->
<!--      height: 500px;-->
<!--      border-radius: 500px;-->
<!--      margin: auto;-->
<!--      border: 10px double black;-->
<!--    }-->

<!--    .waveWrapperInner {-->
<!--      position: absolute;-->
<!--      width: 100%;-->
<!--      overflow: hidden;-->
<!--      height: 100%;-->
<!--      bottom: 120px;-->
<!--      background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);-->
<!--    }-->

<!--    .bgTop {-->
<!--      z-index: 15;-->
<!--      opacity: 0.5;-->
<!--    }-->

<!--    .bgMiddle {-->
<!--      z-index: 10;-->
<!--      opacity: 0.75;-->
<!--    }-->

<!--    .bgBottom {-->
<!--      z-index: 5;-->
<!--    }-->

<!--    .wave {-->
<!--      position: absolute;-->
<!--      left: 0;-->
<!--      width: 200%;-->
<!--      height: 100%;-->
<!--      background-repeat: repeat no-repeat;-->
<!--      background-position: 0 bottom;-->
<!--      transform-origin: center bottom;-->
<!--    }-->

<!--    .waveTop {-->
<!--      background-size: 50% 100px;-->
<!--    }-->

<!--    .waveAnimation .waveTop {-->
<!--      animation: move-wave 3s;-->
<!--      -webkit-animation: move-wave 3s;-->
<!--      -webkit-animation-delay: 1s;-->
<!--      animation-delay: 1s;-->
<!--    }-->

<!--    .waveMiddle {-->
<!--      background-size: 50% 120px;-->
<!--    }-->

<!--    .waveAnimation .waveMiddle {-->
<!--      animation: move_wave 10s linear infinite;-->
<!--    }-->

<!--    .waveBottom {-->
<!--      background-size: 50% 100px;-->
<!--    }-->

<!--    .waveAnimation .waveBottom {-->
<!--      animation: move_wave 15s linear infinite;-->
<!--    }-->
<!--  </style>-->

<!--</head>-->

<!--<body>-->

<!--  <div class="waveWrapper waveAnimation">-->
<!--    <div class="waveWrapperInner bgTop">-->
<!--      <div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div>-->
<!--    </div>-->
<!--    <div class="waveWrapperInner bgMiddle">-->
<!--      <div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div>-->
<!--    </div>-->
<!--    <div class="waveWrapperInner bgBottom">-->
<!--      <div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div>-->
<!--    </div>-->
<!--  </div>-->

<!--</body>-->

<!--</html>-->
